<template>
	<view class="container">
	

		<view class="card-info" :style="{backgroundImage: 'url('+cardBackgroundColor()+')'}">
			<view class="info-row">
				<text>支付卡</text>
				<text>{{ parseCardState() }}</text>
			</view>
			<view class="info-row">
				<text>余额：{{ userBalance.userBalance || 0 }}</text>
				<text>卡号：{{ cardData.cardNum || "暂无" }}</text>
			</view>
		</view>

		<u-row class="button-row">
			<u-col :span="3" class="button-col">
				<u-icon @click="onBind" label="绑卡" space="12rpx" labelPos="bottom" size="60" :name="shuaka" />
			</u-col>
			<u-col :span="3" class="button-col">
				<u-icon @click="onLoss" label="挂失" space="12rpx" labelPos="bottom" size="60" :name="guashi" />
			</u-col>
			<u-col :span="3" class="button-col">
				<u-icon @click="onRecharge" label="充值" space="12rpx" labelPos="bottom" size="60" :name="chongzhi" />
			</u-col>
			<u-col :span="3" class="button-col">
				<u-icon @click="onRecord" label="消费记录" space="12rpx" labelPos="bottom" size="60" :name="guashi" />
			</u-col>
		</u-row>

		<u-row class="button-row">
			<u-col :span="3" class="button-col">
				<u-icon @click="onConpon" label="优惠券" space="12rpx" labelPos="bottom" size="60" :name="youhuiquan" />
			</u-col>
			<u-col :span="3" class="button-col">
				<u-icon @click="onQr" label="支付码" space="12rpx" labelPos="bottom" size="60" :name="zhifuma" />
			</u-col>
			<u-col :span="2.5" class="button-col"></u-col>
			<u-col :span="2.5" class="button-col"></u-col>
		</u-row>
	</view>
</template>
<script>
	import Config from '@/util/index.js'
	import {
		cardUser,
		bindCard,
		lossCard
	} from '@/api/user'
	import alert from '../../../../uview-ui/libs/config/props/alert';
	export default {
		data() {
			return {
				data: {},
				userId: '',
				cardData: {},
				cardType: '',
				deptId: '',
				userBalance: {},
				colors: {
					'0': this.picUrl + "card_bg_green.png",
					'1': this.picUrl + "card_bg_grey.png",
				},
				shuaka: '',
				guashi: '',
				chongzhi: '',
				youhuiquan: '',
				zhifuma: '',
				intervalId: null
			};
		},

		onLoad() {

			this.userId = uni.getStorageSync('userId')

		},
		onShow() {
			this.userId = uni.getStorageSync('userId')
			this.getCardData();
		},
		created() {
			this.shuaka = this.picUrl + "shuaka.png"
			this.guashi = this.picUrl + "guashi.png"
			this.chongzhi = this.picUrl + "chongzhi.png"
			this.youhuiquan = this.picUrl + "youhuiquan.png"
			this.zhifuma = this.picUrl + "zhifuma.png"
		},
		methods: {
			cardBackgroundColor() {
				if (this.cardData.cardState == "1") {

					return this.colors[0]
				} else {

					return this.colors[1]
				}
			},
			parseCardState() {

				const stateMap = {
					'0': '卡状态：未绑定',
					'1': '卡状态：正常',
					'2': '卡状态：已挂失',
					'3': '卡状态：已注销'
				};
				return stateMap[this.cardData.cardState] || '卡状态：未绑定';
			},
			getCardData() {
				const app = this
				let params = {
					userId: app.userId
				}
				cardUser(params).catch(res1 => {

					if (res1.data.code == 200) {

						// uni.showModal({
						// 	showCancel: false,
						// 	content: res1.data.userCard.disheorderPhysicalcard.cardId,

						// })
						console.log("xxx", res1.data)
						//		alert(res1.data.userCard.disheorderPhysicalcard.cardId)
						app.cardData = res1.data.userCard.disheorderPhysicalcard;
						app.userBalance = res1.data.userBalance;
						app.cardType = res1.data.cardType;
						app.deptId = res1.data.deptId;
						uni.setStorageSync("cardId",app.cardData.cardId);
							uni.setStorageSync("cardNumber",app.cardData.cardNum);
						// uni.showModal({
						// 	showCancel: false,
						// 	content: JSON.stringify(res1.data),

						// })
						console.log("xxx", res1.data)
						//		alert(res1.data.userCard.disheorderPhysicalcard.cardId)
						// app.cardData = res1.data.userCard.disheorderPhysicalcard;
						// app.userBalance = res1.data.userBalance;

					}
				})

			},
			onBind() {
				if (this.cardData == undefined || this.cardData.cardState == undefined || this.cardData
					.cardState == "0" || this.cardData
					.cardState == "3") {
					uni.navigateTo({
						url: '/pages/student/my/card_manager/bind'
					});
				} else {
					// uni.navigateTo({
					// 	url: '/pages/student/my/card_manager/bind'
					// });
					uni.showModal({
						showCancel: false,
						content: "您的账户已绑定实体卡，请勿重复绑定",

					})
				}

			},
			onLoss() {
				const app = this
				// 可以在这里添加挂失逻辑
				if (app.cardData.cardState == "1") {
					uni.showModal({
						showCancel: true,
						content: "挂失后您的账户将不能使用，请至一卡通中心进行退款或补卡。",
						success: function(res) {
							if (res.confirm) {

								let params = {
									cardId: app.cardData.cardId,
									userId: app.userId,
									cardState: "2"
								}

								lossCard(params).catch(response => {
									console.log(response)
									if (response.data.code == 200) {
										app.getCardData()
									}
								})
							}
						}
					})

				} else {
					uni.showModal({
						showCancel: false,
						content: "请绑定实体卡",
						success() {
							uni.navigateBack({
								delta: 2
							})
						}
					})
				}

			},
			onRecharge() {
				const app = this
				if (app.cardData.cardState == "1") {
					uni.navigateTo({
						url: `/pages/student/my/card_manager/recharge?cardType=${app.cardType}&deptId=${app.deptId}`

					});

				} else {
					uni.showModal({
						content: '请先绑定卡片',
						showCancel: false
					});
				}

			},
			onRecord() {
				uni.showModal({
					content: '这是消费记录事件',
					showCancel: false
				});
			},
			onConpon() {
				uni.showModal({
					content: '这是优惠券事件',
					showCancel: false
				});
			},
			onQr() {
					const app = this
			if(this.cardData.cardState == "1"){
				uni.navigateTo({
					url: `/pages/student/my/card_manager/card_qr?code=${app.cardData.cardNum}`
				});
			}
			},

		}
	};
</script>
<style>
	.container {
		display: flex;
		flex-direction: column;
		width: 100%;
	}

	.navbar {
		background-color: #f5f5f5;
		width: 100%;
	}

	.card-info {

		width: calc(100%-48rpx);
		height: 260rpx;
		display: flex;
		border-radius: 48rpx;
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		margin: 24rpx;
		padding: 48rpx;
		box-sizing: border-box;
		color: #ffffff;
	}

	.info-row {
		display: flex;
		width: 100%;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		font-size: 1rem;
	}

	.button-row {
		display: flex;
		width: 100%;
	}

	.button-col {
		display: flex;
		justify-content: center;
		align-items: center;
		padding: 1rem;
		box-sizing: border-box;
		flex: 1;
		/* 确保每列均匀分布 */
	}
</style>